import {Image, View, Text} from '@tarojs/components';
import React, {Component} from 'react';
import Taro, {getCurrentInstance} from '@tarojs/taro';
import {connect} from 'react-redux';
import './index.less';
import * as T from './types';
import actions from './actions';
import {store2Props} from './selectors';
import lanjingBg from '@/assets/image/member/lanjing-bg.png';
import chijingBg from '@/assets/image/member/chijing-bg.png';
import api from 'api';
import {AtIcon} from 'taro-ui';
import 'taro-ui/dist/style/components/icon.scss';
import StartTask from '@/pages/common/startTask/startTask';
actions().actions.loadReducer();
// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class Index extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    this.props.actions.init();
  }
  componentDidShow(): void {
    const title = Taro.getStorageSync('taskModel');
    if (title) {
      Taro.showToast({
        title,
        icon: 'none',
      });
      Taro.removeStorageSync('taskModel');
    }
  }

  async onShareAppMessage() {
    //触发分享，任务完成
    let task = Taro.getStorageSync('task');
    if (task) {
      task = JSON.parse(task);
      let id = task.id;
      await api.TaskCenterController.completedTask({id});

      Taro.removeStorageSync('task');
      Taro.setStorageSync(
        'taskModel',
        `获得${task.taskInfoVO.rewardType == 0 ? task.taskInfoVO.rewardPoints : ''}${
          ['积分', '优惠券', '实物商品'][task.taskInfoVO.rewardType]
        }${task.taskInfoVO.rewardType == 2 ? '请到我的-我的奖励中填写收货地址' : ''}`,
      );
    }
    let wechatShareInfo = JSON.parse(Taro.getStorageSync('wechatShareInfo'));
    return {
      title: wechatShareInfo.title,
      imageUrl: wechatShareInfo.imgUrl[0].url,
    };
  }

  render() {
    const {
      actions,
      main: {selectId, lanjingList, chijingList, menu, lanjingLength, chijingLength},
    } = this.props;
    return (
      <View className="benefitsPage">
        <StartTask />
        <View className="benefitsPage-defualt">
          <View className="benefitsPage-menu" style={{zIndex: 2, justifyContent: 'center'}}>
            等级特权
          </View>
          <View style={{boxShadow: '7px 0 34px -15px #D8D8D8', flex: 1}}>
            {menu.map((e) => (
              <View
                className={`benefitsPage-menu benefitsPage-menuBody ${
                  e.id == selectId ? 'benefitsPage-menuSelect' : ''
                }`}
                key={e.id}
                onClick={() => {
                  this.props.actions.action.commonChange('main.selectId', e.id);
                  actions.action.page();
                }}
              >
                {e.label}
                <AtIcon value="chevron-right" size="14" className="rightIcon"></AtIcon>
              </View>
            ))}
          </View>
        </View>
        <View className="benefitsPage-lanjing">
          <View className="benefitsPage-lanjing-title">
            <Text className="titleText">蓝晶会员</Text>
            <Text className="memberLengthText">{lanjingLength}项</Text>
            <Image className="memberBg" src={lanjingBg} />
          </View>
          <View style={{borderRight: '2rpx solid #EEEEEE', flex: 1}}>
            <View className="benefitsPage-menu benefitsPage-menuLength">{lanjingList.length}项</View>

            {lanjingList.map((e) => (
              <Text key={e.rightsId} className="benefitsPage-menu">
                {e.rightsName}
              </Text>
            ))}
          </View>
        </View>
        <View className="benefitsPage-chijing">
          <View className="benefitsPage-chijing-title">
            <Text className="titleText">赤晶会员</Text>
            <Text className="memberLengthText">{chijingLength}项</Text>
            <Image className="memberBg" src={chijingBg} />
          </View>
          <View className="benefitsPage-menu  benefitsPage-menuLength">{chijingList.length}项</View>
          {chijingList.map((e) => (
            <Text key={e.rightsId} className="benefitsPage-menu">
              {e.rightsName}
            </Text>
          ))}
        </View>
      </View>
    );
  }
}
